<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <div
      id="rectBox"
      :style="{
        backgroundColor: nodeData.currentStyle.fill,
        border: '1.5px solid ' + nodeData.currentStyle.stroke
      }"
    ></div>
  </div>
</template>
<script>
import mixin from './mixin'
export default {
  name: 'RectCom',
  mixins: [mixin],
  data() {
    return {
      keepProportions: true,
      nodeData: {
        shape: 'RectCom', //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        text: '文本',
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: '#fff',
          stroke: '#000',
          strokeWidth: 2
        },
        isDropEnd: false,
        width: 100,
        height: 100,
        // 其他样式
        style: {}
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  #rectBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    white-space: nowrap;
  }
}
</style>
